<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <!-- 搜狗强制全屏 -->
    <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,minimal-ui"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="true" />
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait" />
    <!-- QQ强制全屏 -->
    <meta name="x5-orientation" content="portrait" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="x5-page-mode" content="app">
    <!-- 360强制全屏 -->
    <meta name="360-fullscreen" content="true" />

    <link rel="stylesheet" href="__CSS__/ydui.css"/>
    <link rel="stylesheet" href="__CSS__/app.css"/>
    <script src="__JS__/ydui.flexible.js"></script>
    <style>
        iframe.game {
            border: 1px solid #000;
            width: 100%;
            height: 100%;
        }

        #h5_pay{
            background:#fff;
            position:fixed;
            top: 25%;
            left: 13%;
            width:5.56rem;
        }
        #h5_pay div{
            padding:0.2rem;
            font-size:0.24rem;
            color:#666;
            border-bottom:1px #ddd solid;
        }
        #h5_pay div span{
            color:#e70000;
            font-size:0.2rem;
            float: right;
        }
        #h5_pay div .info{
            display:inline-block;
            border:none;
            padding:0;
            margin-left:0.2rem;
            font-size:0.3rem;
            color:#333;
        }
        #h5_pay div .info p{
            padding-top: 0.04rem;
            font-size:0.2rem;
            color:#888;
        }
        #wxpay,#alipay{
            background:url('__IMG__/arrows.png') no-repeat 97% center;
            background-size:0.24rem 0.24rem;
        }
        #h5_pay div img{
            display:inline-block;
            width:0.7rem;
            height:0.7rem;
            float:left;
        }
        #h5_pay h3 {
            font-size:0.3rem;
            color:#333;
            height:0.84rem;
            line-height:0.84rem;
            background-color:#f5f5f5;
            padding-left:0.3rem;
            font-weight: normal;
            border-bottom:1px #ddd solid;
        }
        #h5_pay h3 span{
            display:inline-block;
            width:0.24rem;
            height:0.24rem;
            background:url('__IMG__/off.png') no-repeat;
            background-size:100%;
            float:right;
            margin: 0.3rem 0.3rem 0 0;
        }

        #pay_bg{
            width:100%;
            height:100%;
            background:#000;
            opacity:0.5;
            position:fixed;
            top:0;
            left:0;
        }
        #esc{
            color:#fff;
            position:absolute;
            right:0;
            bottom:40%;

        }
        #off{
            color:#fff;
            position:absolute;
            right:0;
            bottom:30%;

        }
        button{
            font-size:0.2rem;
            border:none;
        }
        #esc img,#off img{
            width:0.4rem;
            height:0.4rem;
            margin-bottom:0.1rem;
        }
    </style>
</head>
<body>

<section class="g-flexview" id="view">
    <div id='tab'>
    </div>
    <div class="leftbar-box" style="display:none;">
        <if condition="$type == app">
        <button id="esc" style="font-size:0.2rem;"><img src="__IMG__/esc.png" /><span>全屏</span></button>
        <button id="off"><img src="__IMG__/break.png" />关闭</button>

        </if>
        <div class="leftbar">
            <div class="nav">
                <ol class="cf">
                    <li class="active" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon gift"></div>
                        <span>游戏礼包</span></a>
                    </li>
                    <li class="" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon game"></div>
                        <span>更多游戏</span></a></li>
                    <li class="" style="width: 33.3333%;"><a href="javascript:;">
                        <div class="icon kf"></div>
                        <span>联系客服</span></a></li>
                </ol>
            </div>

            <div class="box">
                <div class="game-scroll">
                    <ol class="gift-box">
                    </ol>
                    <div class="no-gift">
                        <img id="erweima" src="__IMG__/code.jpg"><br>
                        <p>
                            <b style="color:#ffb100;">关注公众号</b>了解更多游戏福利
                        </p>
                        www.h5youx.com
                    </div>
                </div>
                <div class="game-scroll" hidden="true">
                    <ol class="gamelist">

                    </ol>
                </div>
                <div class="game-scroll" hidden="true">
                    <div class="kf">
                        <h3>关注公众号</h3>
                        <p style="font-size:11px;color:#555;">专业客服7*24小时为您解答问题</p>
                        <div style="height:10px;"></div>
                        <img src="__IMG__/code.jpg"><br>
                        <p>
                            进入公众号联系客服<b style="color:#ffb100;">成为推广员</b>
                        </p>
                        www.h5youx.com
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="his_wrap" id="his_wrap" hidden="true">
        <div class="his_box">
            <div class="his_title"><i>长按识别二维码关注369页游</i><span onclick="$('#his_wrap').attr('hidden','true');">×</span></div>
            <div class="his_focus"><img src="<empty name='channel_icon'>__IMG__/code.jpg<else/>{$channel_icon}</empty>"></div>
            <div style="height:21px;"></div>
            <ol class="his_con">
            </ol>
            <div class="his_footer"><a href="javascript:;"
                                       onclick="window.location.href = '{:U(\'Index/index\')}'">离开游戏</a>
                <div style="display:none" class="checkbox"><input id="his_checkbox" type="checkbox"><label
                        for="his_checkbox">今日不再提示</label></div>
            </div>
        </div>
    </div>
    <div id="pay_bg" style="display:none;">
    </div>
    <div id="h5_pay" data-value=""  style="display:none;">
        <h3>请选择支付方式<span></span></h3>
        <div>订单金额<span><text style="font-size:0.3rem;">6</text>元</span></div>
        <div id="wxpay"><img src='__IMG__/wechat.png' /><div class="info">微信支付<p>使用微信支付，安全便捷</p></div></div>
        <!-- <div id="alipay"><img src='__IMG__/alipay.png' /><div class="info">支付宝支付<p>使用支付宝支付，安全便捷</p></div></div> -->
    </div>



</section>
<notempty name="ad">
    <img src='http://www.game.net/channel/{$ad}' id='channel_ad' width='100%' height='100%' style='position: fixed;min-height: 100%;left:0;top:0;'/>
</notempty>
<!-- 引入jQuery 2.0+ -->
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="__JS__/ydui.js"></script>

<script type="text/javascript">
    var game_id = '{$game_id}';
    var is_wx = '{$is_wx}';
    if(is_wx == 1){
        pushHistory();
    }
    window.addEventListener("popstate", function (e) {

        $.post('{:U("Index/gameList")}', {}, function (data) {
            var str = '';
            for (var i = 0 ;i < 3 ; i++) {
                if(game_id == data[i].id){
                    str +='<li><a href="' + data[3].url + '">';
                    str +='<img src="' + data[3].img + '" alt="'+data[3].title+'"></a></li>';
                }else{
                    str +='<li><a href="' + data[i].url + '">';
                    str +='<img src="' + data[i].img + '" alt="'+data[i].title+'"></a></li>';
                }

            }

            $('.his_con').eq(0).html(str);
        }, 'json');
        off = false;
        $('#his_wrap').removeAttr('hidden');
    }, false);
    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }


</script>


<script>

    var type = '{$type}';
    $(function () {
        $('.leftbar-box').eq(0).css('marginLeft',parseInt('-'+$('.leftbar-box').eq(0).outerWidth()));
        $('.leftbar-box').eq(0).show();
        var w = $(window).width();
        var h = $(window).height();
        $('.game-scroll').css('height', h - 64);
        $('.game-scroll').css('width', '100%');
        var game_page = 1;
        var gift_page = 1;
        var dialog = YDUI.dialog;
        var url = '{$url}';
        dialog.loading.open('很快加载好了');
        console.log(url);
//        var channel_ad = '{$ad}'
//        if(channel_ad){
//            var imageContent ="<img src='http://www.game.net/channel/{$ad}' id='channel_ad' width='100%' height='100%' style='position: fixed;min-height: 100%;left:0;top:0;'/>";
//            $("body").append(imageContent);
//        }
        var iframe = document.createElement("iframe");
        iframe.src = url;
        iframe.className = 'game';
        if (iframe.attachEvent) {
            iframe.attachEvent("onload", function () {
                setTimeout(function () {
                    dialog.loading.close();
                    $("#channel_ad").remove()
                }, 1000);
            });
        } else {
            iframe.onload = function () {
                setTimeout(function () {
                    dialog.loading.close();
                    $("#channel_ad").remove()
                }, 1000);
            };
        }
        $('#view').append(iframe);



        var tab = document.getElementById('tab');
        var t_top = 0;
        var t_left = 0;
        var click = false;
        tab.addEventListener('touchstart', function (event) {
            click = true;
            event.preventDefault();//阻止其他事件
            var touch = event.targetTouches[0];
            var pos = $(this).position()
            t_top = touch.pageY - pos.top;
            t_left = touch.pageX - pos.left;
        });
        tab.addEventListener('touchmove', function (event) {
            event.preventDefault();//阻止其他事件
            // 如果这个元素的位置内只有一个手指的话
            if (event.targetTouches.length == 1) {
                var touch = event.targetTouches[0];  // 把元素放在手指所在的位置
                var left = touch.pageX - t_left;
                if (left >= 0)
                    tab.style.left = touch.pageX - t_left + 'px';
                var top = touch.pageY - t_top;
                tab.style.top = (top > 0 ? top : 0) + 'px';
                click = false;
            }
        }, false);
        tab.addEventListener('touchend', function (event) {
            event.preventDefault();//阻止其他事件
            if (click) {
                $('.leftbar-box').eq(0).animate({
                    marginLeft:0
                });
            }
            var pos = $(this).position();
            var css = {
                top: pos.top + $(this).height() > h ? (h - $(this).height()) : pos.top,
                left: (w - $(this).width()) + 19
            };
            $(this).css(css);
        });

        $('.cf li').click(function () {
            $('.cf li').removeClass('active');
            $(this).addClass('active');
            $('.game-scroll').attr('hidden', true);
            $('.game-scroll').eq($(".cf li").index($(this))).removeAttr('hidden');
        });
        $('.leftbar-box').eq(0).click(function () {
            $('.leftbar-box').eq(0).animate({
                marginLeft:parseInt('-'+$('.leftbar-box').eq(0).outerWidth())
            });

        });
        $('.leftbar').click(function (event) {
            event.stopPropagation();
        });


        //礼包初始化

        var gift_stop = true;

        $.post('{:U("Gift/giftList")}', {'game_id': game_id}, function (data) {
            var str = '';
            for (var item in data) {
                str += '<li><div><h3>';
                str += data[item].title + '</h3>';
                str += '<p data-info="' + data[item].subtitle + '">' + data[item].subtitle.substr(0, 18);
                str += ' <a onclick="more(this)" href="javascript:;">更多</a></p>';
                str += '<em><i style="width:' + data[item].percent + '%"></i></em><span>礼包剩余：' + data[item].percent + '%</span></div>';
                str += '<a href="javascript:void(0);" class="get_code" data-gift="' + data[item].gift + '">领取</a></li>';
            }

            if(!str){
                str += '<p align="center">暂无礼包</p>';
            }
            $('.gift-box').eq(0).html(str);
            if (data.length != 20) {
                game_stop = false;
                game_page++;
            }

            $('.get_code').click(function () {
                dialog.loading.open('奋力领取中。。。');
                var gift = $(this).attr('data-gift');
                $.ajax({
                    'url': "{:U('Gift/getCode')}",
                    type: 'post',
                    data: {gift: gift},
                    success: function (res) {
                        dialog.loading.close();
                        try {
                            if (res.status == 1) {
                                dialog.alert('恭喜你抢到兑换码：<br /><span class="badge-primary">' + res.info + '</span> （长按可复制)');
                            } else {
                                dialog.alert(res.info);
                            }
                        } catch (ex) {
                            dialog.alert('服务器错误');
                        }
                        console.log(res);
                    }, error: function (ex) {
                        dialog.loading.close();
                        dialog.alert('网络错误');
                    }
                });
            });
        }, 'json');

        //礼包下拉加载
        $('.game-scroll').eq(0).scroll(function (event) {
            if ($(this).scrollTop() + $('.game-scroll').eq(0).height() + 10 >= $(document).height() && $(this).scrollTop() > 10 && gift_stop) {
                gift_stop = false;
                $.post('{:U("Gift/giftList")}', {'game_id': game_id}, function (data) {
                    var str = '';
                    for (var item in data) {
                        str += '<li><div><h3>';
                        str += data[item].title + '</h3>';
                        str += '<p data-info="' + data[item].subtitle + '">' + data[item].subtitle.substr(0, 18);
                        str += ' <a onclick="more(this)" href="javascript:;">更多</a></p>';
                        str += '<em><i style="width:' + data[item].percent + '%"></i></em><span>礼包剩余：' + data[item].percent + '%</span></div>';
                        str += '<a href="javascript:void(0);" class="get_code" data-gift="' + data[item].gift + '">领取</a></li>';
                    }

                    $('.gift-box').eq(0).html(str);

                    if (data.length == 20) {
                        gift_stop = true;
                        gift_page++;
                    }

                    $('.get_code').click(function () {
                        dialog.loading.open('奋力领取中。。。');
                        var gift = $(this).attr('data-gift');
                        $.ajax({
                            'url': "{:U('Gift/getCode')}",
                            type: 'post',
                            data: {gift: gift},
                            success: function (res) {
                                dialog.loading.close();
                                try {
                                    if (res.status == 1) {
                                        dialog.alert('恭喜你抢到兑换码：<br /><span class="badge-primary">' + res.info + '</span> （长按可复制)');
                                    } else {
                                        dialog.alert(res.info);
                                    }
                                } catch (ex) {
                                    dialog.alert('服务器错误');
                                }
                                console.log(res);
                            }, error: function (ex) {
                                dialog.loading.close();
                                dialog.alert('网络错误');
                            }
                        });
                    });
                }, 'json');
            }
        });


        //游戏初始化
        var game_stop = true;

        $.post('{:U("Index/gameList")}', {}, function (data) {
            var str = '';
            for (var item in data) {
                str += '<li><img src="' + data[item].img + '" alt="'+data[item].title+'">';
                str += '<div><h3>' + data[item].title + '</h3>';
                str += '<p>' + data[item].subtitle + '</p></div>';
                str += '<a href="' + data[item].url + '" >进入</a></li>';
            }

            $('.gamelist').eq(0).html(str);

            if (data.length != 20) {
                game_stop = false;
                game_page++;
            }
        }, 'json');

        //游戏下拉加载
        $('.game-scroll').eq(1).scroll(function (event) {
            if ($(this).scrollTop() + $('.game-scroll').eq(1).height() + 10 >= $(document).height() && $(this).scrollTop() > 10 && game_stop) {
                game_stop = false
                $.post('{:U("Index/gameList")}', {'page': game_page}, function (data) {
                    console.log(data.length);

                    var str = '';
                    for (var item in data) {
                        str += '<li><img src="' + data[item].img + '" alt="'+data[item].title+'">';
                        str += '<div><h3>' + data[item].title + '</h3>';
                        str += '<p>' + data[item].subtitle + '</p></div>';
                        str += '<a href="' + data[item].url + '" >进入</a></li>';
                    }

                    $('.gamelist').eq(0).append(str);
                    if (data.length == 20) {
                        game_stop = true;
                        game_page++;
                    }

                }, 'json');
            }
        });

        console.log(type);
        if(type == 'app'){
            
            window.location.href = 'szwzaction://1';
			$('#esc span').eq(0).html('取消');
        }

        var action = 1;
        $('#off').click(function(){
            window.location.href = '{:U("Index/index")}';

        });

        $('#esc').click(function(){
            console.log(action);
            if(action == 1){
                action = 2;
                
                window.location.href = 'szwzaction://2';
				$('#esc span').eq(0).html('全屏');
            }else{
                action = 1;
                
                window.location.href = 'szwzaction://1';
				$('#esc span').eq(0).html('取消');
            }
        });

    });

    function more(_this) {
        alert($(_this).parent().attr('data-info'));
    }


</script>
<!--<script src="__JS__/vconsole.min.js"></script>-->
<script type="text/javascript">
    var jsparam = {};
    var dialog = YDUI.dialog;
    var pay_type = '{$pay_type}';
    var channel = '{$channel_id}';
    var is_wx = '{$is_wx}';
    var pay_status = '';

    // main js function
    function fMain(v) {
        console.log(v);
        var obj = typeof v == 'object' ? v : JSON.parse(v);
        obj._gameID = '{$Think.get.id}';
        obj.url = window.location.href;
        $('#pay_bg').show();
        $('#h5_pay').show();
        $('#h5_pay div span text').eq(0).html(parseInt(obj.pay)/100);
        $('#h5_pay').attr('data-value',JSON.stringify(obj));
    }

    $(function(){
        $('#pay_bg').click(function(){
            if (pay_status != ''){clearInterval(pay_status)};
            $('#pay_bg').hide();
            $('#h5_pay').hide();
        });

        $('#h5_pay h3 span').eq(0).click(function(){
            if (pay_status != ''){clearInterval(pay_status)};
            $('#pay_bg').hide();
            $('#h5_pay').hide();
        });

        $('#alipay').click(function(){
            var obj = $('#h5_pay').attr('data-value');
            obj = typeof obj == 'object' ? obj: JSON.parse(obj);
            obj.payType = 'ZWAP';
            pay(obj);
        });

        $('#wxpay').click(function(){
            var obj = $('#h5_pay').attr('data-value');
            obj = typeof obj == 'object' ? obj: JSON.parse(obj);
            obj.payType = 'WWAP';
            pay(obj);
        })
    });

    function pay(obj) {
        console.log(obj);
        $.ajax({
            url: '{:U("Pay/pay")}',
            type: 'post',
            data: obj,
            success: function (res) {
                if(res.status){
                    if(type == 'app'){
                        window.location.href= 'szwzpay://'+res.url;
                    }else{
                        window.location.href= res.url;
                    }

                    //if (pay_status != ''){clearInterval(pay_status)};
                    //pay_status = setInterval('payStatus('+res.trade_no+')',1000);
                }
            }, error: function (ex) {
                dialog.alert('网络错误！');
            }
        });
    }

//    function payStatus(trade_no){
//        console.log(trade_no);
//        $.post('{:U("Pay/pay_status")}',{'trade_no':trade_no},function(res){
//            if(res.status){
//                clearInterval(pay_status);
//                dialog.alert('支付成功');
//            }
//        })
//    }

</script>
</body>
</html>